<template>
  <h1>计算属性可读（简写方式，不可被修改）</h1>
  <span>市:</span><input type="text"  v-model="data1" >+
  <span>区:</span><input type="text" v-model="data2">=
  <span>具体地址:</span><input type="text" v-model="data3">
  <span>具体地址:</span><input type="text" v-model="data3">
  <br>
  <button @click="handleComputed1">点击改变计算属性具体地址</button>
  <hr>
  <h1>计算属性可读（简写方式，不可被修改）</h1>
  <span>市:</span><input type="text"  v-model="data1" >+
  <span>区:</span><input type="text" v-model="data2">=
  <span>具体地址:</span><input type="text" v-model="data4">
  <span>具体地址:</span><input type="text" v-model="data4">
  <br>
  <button @click="handleComputed2">点击改变计算属性具体地址</button>
  </template>
  
  <script setup>
  import { ref, computed } from "vue";
      const data1 = ref('南京');
      const data2 = ref('江宁');
      //简化 可读计算属性
  const data3=computed(()=>{
     console.log('computed','触发了');
       return data1.value+'-'+data2.value
  })
     const handleComputed1 = () => {
        data3.value = '上海';
      };

      
    //完整的计算属性  可读可写
      const data4=computed({
        get(){
          return data1.value+'-'+data2.value
        },
        set(val){           
          console.log(val,'whx')           //当计算属性被改变时可以进行操作
         return  data2.value=val        //参数val是被设置的值，这里被设置为了上海，val也就为上海
        }
      })
      const handleComputed2 = () => {
        data4.value = '上海';
      };

  </script>

<style>

</style>